<template>
	<view class="pages" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="content">
			<view class="card">
				<view class="title">
					受理进度
				</view>
				<view class="steps" style="margin-top: 30rpx;">
					<view class="steps1">
						<view class="">
							<span class="circle"></span>
							<span class="step_label">{{ state[detail.state] }}</span>
						</view>
						<span class="step_time">{{ detail.updateDate }}</span>
					</view>

				</view>
			</view>
			<view class="card">
				<view class="card1" style="margin-bottom: 30rpx;">
					<span class="title">
						投诉对象
					</span>

					<span class="steps step_tip">
						{{ detail.complainantObject }}
					</span>
				</view>
				<view class="card1">
					<span class="title">
						详细意见
					</span>
					<span class="steps step_tip">
						{{ detail.content }}
					</span>
				</view>

			</view>
			<view class="card">
				<view class="card1" style="margin-bottom: 30rpx;">
					<span class="title">
						联系电话
					</span>
					<span class="steps step_tip">
						{{ jmPhone }}
					</span>
					<view class="bhz">
						<image src="https://i.ringzle.com/file/20240328/c8d4bb6d0a704bc5be1935ed04ba34ae.png"></image>
						<text>保护中</text>
					</view>
				</view>
				<view class="card1" style="margin-bottom: 30rpx;">
					<span class="title">
						反馈编号
					</span>
					<span class="steps step_tip">
						{{ detail.id }}
					</span>
				</view>
				<view class="card1">
					<span class="title">
						意见类型
					</span>
					<span class="steps step_tip">
						{{ complainClass[detail.complainantType].name }}
					</span>
				</view>
			</view>
			<view class="card " v-if="imgList && imgList.length">
				<view class="title">
					投诉图片
				</view>
				<view class="card2">
					<image :src="item" mode="aspectFill" v-for="item, index in imgList" :key="index" @click="previewImage(index)">
					</image>
				</view>
			</view>
			<view class="card" v-if="detail.reply">
				<view class="card1">
					<span class="title">
						平台回复
					</span>
					<span class="steps step_tip" @click='() => {
						this.replyShow = true
					}'>
						{{ detail.reply }}
					</span>
				</view>
			</view>
			<view class="card" v-if="detail.state == 6">
				<view class="card1">
					<span class="title">
						评价
					</span>
				</view>
				<view class="pj_content">
					<view class="pc_date">
						<text>{{ detail.commentCreateDate }}</text>
						<u-rate count="5" size='33rpx' v-model="detail.score" allowHalf='true' activeColor='#ff8f23'
							readonly></u-rate>
					</view>
					<view class="pc_nr">{{ detail.comment }}</view>
				</view>
			</view>
		</view>
		<u-modal @confirm='() => {
			this.replyShow = false
		}' @close='() => {
			this.replyShow = false
		}' :closeOnClickOverlay="true" :show="replyShow" title="详情" :content='detail.reply'></u-modal>
		<!-- 状态 0待处理 1处理中 2派单中 3已解决 4继续投诉 -->
		<view class="bottom" v-if="detail.state == 0">
			<view class="btn" @click="cancel()">
				撤销投诉
			</view>
		</view>
		<view class="bottom bottom_two" v-if="detail.state == 1">
			<view class="btn" @click="add()" style="margin-right: 60rpx;">
				继续投诉
			</view>

			<view class="btn" @click="resolved()">
				已解决
			</view>
		</view>
		<view class="bottom bottom_two" v-if="detail.state == 2">
			<view class="btn" @click="cancel()">
				撤销投诉
			</view>

			<view class="btn" @click="resolved()">
				已解决
			</view>
		</view>
		<view class="bottom bottom_two" v-if="detail.state == 4">
			<view class="btn" @click="cancel()" style="margin-right: 60rpx;">
				撤销投诉
			</view>
			<view class="btn" @click="resolved()">
				已解决
			</view>
		</view>
		<!-- <view class="bottom" v-if="detail.state==3&&detail.isComment==0">
			<view class="btn" @click="pj()" style="margin-right: 60rpx;">
				评价
			</view>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgList: [],
			h: uni.getSystemInfoSync().windowHeight,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			titleHeader: '意见反馈',
			id: '',
			detail: {},
			complainClass: [{
				name: '功能故障',
				value: 1
			}, {
				name: '景区意见',
				value: 2
			}, {
				name: '产品建议',
				value: 3
			}, {
				name: '预订咨询',
				value: 4
			}, {
				name: '订单咨询',
				value: 5
			}, {
				name: '其他',
				value: 6
			}],
			state: [
				'发起投诉', '处理中', '派单中', '已解决', '继续投诉', '已撤销', '已评价'
			],
			replyShow: false,
			jmPhone: ''
		}
	},
	onLoad(option) {
		this.id = option.id
		this.getComplainDetail()
	},
	methods: {
		previewImage(index) {
			uni.previewImage({
				current: index, // 当前显示图片索引
				urls: this.imgList // 需要预览的图片http链接列表
			});
		},
		pj() {
			const obj = {
				guideId: this.detail.id,
				orderCode: '',
				sourceType: 99
			}
			uni.navigateTo({
				url: '/pagesMy/appraise/appraise2?obj=' + JSON.stringify(obj),
			});
		},
		cancel() {
			this.detail.state = 5;
			if (!this.$reg.mobile(this.detail.complainantPhone)) return this.$showToast('请填写正确的手机号');
			let newData = JSON.parse(JSON.stringify(this.detail));
			newData.complainantPhone = this.$aesTm.encrypt(newData.complainantPhone);
			this.$api.put('/api/complaint', newData).then(res => {
				console.log(res, '----');
				if (res.data.code == 0) {
					uni.showToast({
						title: '已撤销投诉！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pagesMy/complaintFeedback/dataList'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					uni.navigateBack()
				}
			})
		},
		resolved() {
			this.detail.state = 3;
			if (!this.$reg.mobile(this.detail.complainantPhone)) return this.$showToast('请填写正确的手机号');
			let newData = JSON.parse(JSON.stringify(this.detail));
			newData.complainantPhone = this.$aesTm.encrypt(newData.complainantPhone);
			this.$api.put('/api/complaint', newData).then(res => {
				if (res.data.code == 0) {
					uni.showToast({
						title: '感谢您的宝贵意见！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pagesMy/complaintFeedback/dataList'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					uni.navigateBack()
				}
			})
		},
		add() {
			this.detail.state = 4
			if (!this.$reg.mobile(this.detail.complainantPhone)) return this.$showToast('请填写正确的手机号');
			let newData = JSON.parse(JSON.stringify(this.detail));
			newData.complainantPhone = this.$aesTm.encrypt(newData.complainantPhone);
			this.$api.put('/api/complaint', newData).then(res => {
				console.log(res, '----');
				if (res.data.code == 0) {
					uni.showToast({
						title: '已收到您的继续投诉！加急处理中',
						icon: 'none'
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pagesMy/complaintFeedback/dataList'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					uni.navigateBack()
				}
			})
		},
		getComplainDetail() {
			this.$api.get('/api/complaint/' + this.id).then(res => {
				if (res.data.code == 0) {
					this.detail = res.data.data;
					this.jmPhone = this.detail.complainantPhone.replace(/^(.{3})(?:\d+)(.{4})$/, '\$1 **** \$2');
					if (res.data.data.pic) {

						this.imgList = res.data.data.pic.split(',')
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg,
						success() {
							uni.navigateBack()
						}
					})
				}

			})
		}
	}
}
</script>

<style lang="scss" scoped>
.pages {
	height: 100vh;
	background: #fbfbfb;
	font-size: 26rpx;
	position: relative;
	// padding-top: 130rpx;

	.content {
		padding: 20rpx;
	}

	.card {
		border-radius: 16rpx;
		background: #fff;
		padding: 33rpx;
		margin-bottom: 20rpx;

		.step_tip {
			font-size: 30rpx;
		}

		.steps {
			display: flex;
			flex-direction: column;

			.steps1 {
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				&>span :nth-child(1) {
					color: #b5b5b5;
				}

				.circle {
					display: inline-block;
					width: 10rpx;
					height: 10rpx;
					border: 5rpx green solid;
					border-radius: 16rpx;
					margin-right: 30rpx;
				}

				.step_label {
					font-size: 28rpx;
				}

				.step_time {
					font-size: 30rpx;
				}
			}
		}

		.card2 {
			display: grid;
			grid-template-columns: auto auto auto;
			width: 100%;
			grid-gap: 10px;
			border-radius: 19rpx;
			padding: 19rpx;

			&>image {
				width: 200rpx;
				height: 180rpx;
			}
		}

		.card1 {
			display: flex;
			flex-direction: row;
			padding: 19rpx 0;
			position: relative;

			.bhz {
				width: 150rpx;
				height: 58rpx;
				background: rgba(6, 184, 111, .08);
				border-radius: 29rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 50%;
				margin-top: -29rpx;
				right: 0;

				image {
					width: 24rpx;
					height: 27rpx;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #06B86F;
					line-height: 28rpx;
					margin-left: 6rpx;
				}
			}
		}

		.title {
			color: #b5b5b5;
			margin-right: 30rpx;
			white-space: nowrap;
			font-size: 28rpx;
		}

		.pj_content {
			margin-top: 21rpx;

			.pc_date {
				display: flex;
				align-items: center;

				text {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #111111;
					line-height: 24rpx;
					margin-right: 12rpx
				}

				;
			}

			.pc_nr {
				margin-top: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 42rpx;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		padding: 16rpx 0 30rpx;
		background: #fff;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;

		.btn {
			background: #007A69;
			color: white;
			text-align: center;
			height: 92rpx;
			line-height: 92rpx;
			align-self: center;
			border-radius: 46rpx;
			width: 702rpx;
			font-weight: bold;
			font-size: 32rpx;
		}

		&.bottom_two {
			padding: 16rpx 24rpx 30rpx;
			justify-content: space-between;

			.btn {
				width: calc(50% - 11rpx);
			}
		}
	}
}
</style>